<template>
  <el-dialog
    :modelValue="showDlg"
    :title="title"
    width="700px"
    :before-close="handleClose"
  >
    <div>
      <el-form
        :model="formData"
        label-width="100px"
        ref="formRef"
        :rules="formRule"
        inline
      >
        <el-form-item label="SPU名称" prop="">
          <el-input
            clearable
            v-model="formData.name"
            placeholder="请输入SPU名称"
          ></el-input>
        </el-form-item>

        <el-form-item label="SPU品牌" prop="">
          <el-selct
            clearable
            filterable
            v-model="formData.name"
            placeholder="请选择SPU品牌"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-selct>
        </el-form-item>
        <el-form-item label="SPU描述" prop="">
          <el-input
            type="textarea"
            :rows="3"
            v-model="formData.name"
            placeholder="请输入SPU描述"
          ></el-input>
        </el-form-item>

        <el-form-item label="SPU照片" prop="">
          <el-upload
            class="avatar-uploader"
            action="/api/admin/product/fileUpload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <template v-if="formData.imgList && formData.imgList.length > 0">
              <img
                v-for="(item, index) of formData.imgList"
                :key="index"
                :src="item?.url"
                class="avatar"
              />
            </template>

            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="SPU销售属性" prop="">
          <el-selct
            clearable
            filterable
            v-model="formData.name"
            placeholder="请选择SPU销售属性"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-selct>
          <el-button type="primary" icon="el-icon-plus">新增销售属性</el-button>
        </el-form-item>

        <el-row>

         <el-table
          border
          :data="formData.attrValueList"
          style="width: 100%; margin-top: 14px"
        >
          <el-table-column label="序号" type="index" width="70" />
          <el-table-column label="属性名" type="valueName" width="180" />
          <el-table-column prop="valueName" label="属性值">
            <template #="{ row, $index }">
              <el-form-item
                label=""
                label-width="0"
                :prop="`attrValueList.${$index}.valueName`"
                :rules="{
                  required: true,
                  message: '请输入属性值',
                  trigger: 'blur',
                }"
              >
              <!-- <el-tag></el-tag>
                <el-input
                  style="width: 100%"
                  v-model="formData.attrValueList[$index].valueName"
                  placeholder="请输入属性值"
                ></el-input> -->
               <el-button type="success" icon="el-icon-plus"></el-button>

              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="150">
            <template #="{ row }">
              <el-popconfirm
                :title="`您确定要删除${row.valueName}?`"
                width="250px"
                icon="Delete"
                @confirm="onDelete($index)"
              >
                <template #reference>
                  <el-button
                    type="primary"
                    size="small"
                    icon="Delete"
                  ></el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        </el-row>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="saveForm(formRef)">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ElButton } from 'element-plus'
import { ref, reactive, computed } from 'vue'
import { reqAddAttr } from '@/api/product/attr/attr'
import { ElMessage } from 'element-plus'

let $emit = defineEmits('closeDlg')
import type { FormInstance, FormRules } from 'element-plus'
let props = defineProps({
  showDlg: {
    type: Boolean,
    default: false,
  },
  id: String,
})
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
]
let formData = reactive({
  name: '',
  imgList: [],
  attrValueList:[]
})
const formRef = ref<FormInstance>()
const formRule = reactive<FormRules>({
  name: [{ required: true, message: '请输入SPU名称', trigger: 'blur' }],
})
const onDelete = (index: number) => {}

const title = computed(() => {
  return props.id ? '修改' : '新增'
})

const handleClose = () => {
  $emit('closeDlg', false)
}
const onAdd = () => {}

const saveForm = async (formRef: FormInstance | undefined) => {
  if (!formRef) return
  await formRef.validate(async (valid, fields) => {
    //   if (valid) {
    //     if (formData.attrValueList.length <= 0) {
    //       ElMessage.warning('请新增属性值')
    //       return
    //     }
    //     let seenValues = {}
    //     for (let i = 0; i < formData.attrValueList.length; i++) {
    //       let currentValue = formData.attrValueList[i].valueName
    //       if (seenValues[currentValue]) {
    //         ElMessage.warning('属性值不可重复')
    //         return
    //       }
    //     }
    //     const res = await reqAddAttr(formData)
    //     console.log(res)
    //     if (res.code == 200) {
    //       ElMessage.success(formData.id ? '修改成功' : '新增成功')
    //     } else {
    //       ElMessage.warning('新增失败')
    //     }
    //     handleClose()
    //   } else {
    //     console.log('error submit!', fields)
    //   }
  })
}
</script>
<style lang="scss" scoped>
.el-input {
  width: 100%;
}
</style>
